<template>
	<div>
		<div ref="chart" style="height: 300px"></div>
	</div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
const props = defineProps(['chartData', 'dateList']);
const chart = ref(null);
const chartTitle = ref([]);
let resizeObserver;
let myEcharts;
let option
onMounted(() => {
	myEcharts = echarts.init(chart.value);
	resizeObserver = new ResizeObserver(() => {
		myEcharts.resize();
	});
	resizeObserver.observe(chart.value);
	updateChart(myEcharts);
});

// onBeforeUnmount(() => {
// 	resizeObserver.disconnect();
// });
const updateChart = (myEcharts) => {
	option = {
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			data: props.chartData ? props.chartData.map((item) => ({ ...item, icon: 'rect' })) : [],
		},
		xAxis: {
			type: 'category',
			data: [...props.dateList],
		},
		yAxis: {
			type: 'value',
		},
		series: props.chartData,
	};
	myEcharts.setOption(option);
	return option;
};

watch(
	() => props.chartData,
	() => {
		// if (Array.isArray(props.chartData) && props.chartData.length === 0) {
		// 	// myEcharts.clear();
		// } else {
		// 	updateChart(myEcharts);
		// }
		updateChart(myEcharts);
	},
);
</script>
